<template>
  <a-modal title="同步" :width="600" :visible="visible" @ok="handleModalConfirm" @cancel="handleModalCancel"
    :confirm-loading="modalLoading">
    <a-form-model ref="form" :model="form" :rules="formRules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-model-item label="当前渠道" required>
        <a-input v-model="form.channelName" placeholder="请输入" disabled />
      </a-form-model-item>

      <a-form-model-item label="目标渠道" prop="channelIdList">  
        <a-button @click="push_channelIdList" style="margin-right: 8px;">全选</a-button>  
        <a-button @click="dele_channelIdList">重置</a-button>  
    <a-select
    @change="select_change"
    v-model="form.channelIdList"
    mode="multiple"
    :maxTagCount="1"
    :options="channelOpt"
    placeholder="请选择"
    allowClear
  ></a-select>
  </a-form-model-item>  
   

    </a-form-model>
  </a-modal>
</template>

<script>
import * as Ajax from '@/api/loan';
export default {
  props: {
    visible: {
      type: Boolean,
    },
    default: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      modalLoading: false,
      form: {
        channelName: '',
        channelIdList: [],
      },
      formRules: {
        channelIdList: { required: true, message: '请选择渠道', trigger: ['blur', 'change'] },
      },
      channelOpt: [],
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.form = JSON.parse(JSON.stringify(this.default || '{}'));
      } else {
        // this.handleModalCancel();
      }
    },
  },
  mounted() {
    this.getSelect();
  },
  methods: {
    push_channelIdList() {
      // 通过直接赋值的方式来更新 channelIdList，使其包含所有的渠道 ID
      const allChannelIds = this.channelOpt.map(option => option.value);
      this.$set(this.form, 'channelIdList', allChannelIds);
    },
    dele_channelIdList() {
      // 清空 channelIdList
      this.$set(this.form, 'channelIdList', []);
    },
    select_change(value) {
      console.log('选择的值:', value);
    },
    getSelect() {
      Ajax.getChannelSelect().then(({ success, data }) => {
        if (success) {
          this.channelOpt = Array.isArray(data) ? data.map((it) => ({
            ...it,
            label: it.channelName,
            value: it.id,
          })) : [];
        };
      });
    },
    handleModalConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.modalLoading = true;
          const params = {
            channelId: this.default.channelId,
            channelIdList: this.form.channelIdList,
          };
          Ajax.synchronizeMappingList(params)
            .then(({ success }) => {
              if (success) {
                this.$message.success('同步成功');
                this.$emit('success');
                this.handleModalCancel();
              }
            })
            .finally(() => {
              this.modalLoading = false;
            });
        }
      });
    },
    handleModalCancel() {
      this.form = this.$options.data().form;
      this.$refs.form.resetFields();
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 20px;
  padding-top: 16px;
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;
}

::v-deep .ant-form-item {
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
